//html {
//  font-size: 16px;
//}
//
//@media screen and (min-width: 375px) {
//  html {
//    font-size: calc(100% + 2 * (100vw - 375px) / 39);
//    font-size: calc(16px + 2 * (100vw - 375px) / 39);
//  }
//}
//
//@media screen and (min-width: 414px) {
//  html {
//    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
//    font-size: calc(18px + 4 * (100vw - 414px) / 586);
//  }
//}
//
//@media screen and (min-width: 600px) {
//  html {
//    font-size: calc(125% + 4 * (100vw - 600px) / 400);
//    font-size: calc(20px + 4 * (100vw - 600px) / 400);
//  }
//}
//
//@media screen and (min-width: 1000px) {
//  html {
//    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
//    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
//  }
//}

@media screen and (min-width: 1190px) {
  html {
    font-size: 23px;
  }
}

html, body {
  margin: 0;
  font-family: PingFang SC, Helvetica Neue, Helvetica, microsoft yahei, arial, STHeiTi, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  @extend .custom-scrollbar;
}

html {
  transition: background 0.2s;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1190px;
  margin-left: auto;
  margin-right: auto;
}

.custom-scrollbar {
  ::-webkit-scrollbar {
    background-color: #EEEFF0;
    width: 6px;
    border-radius: 99px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #D0D1D2;
    border-radius: 99px;
  }
}

$color-main: #409eff;
$color-blue-deep: #354358;
$color-blue-dark: #293344;
$color-grey: #EFEFF0;

// 背景
.bg-grey {
  background-color: #f2f2f2;
}

// 样式覆盖
p {
  margin: 0;
}

// 定位
.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

// 布局
// flex
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;

}

.justify-between {
  justify-content: space-between;
}

.align-content-between {
  align-content: space-between;
}

.flex-pull-right {
  margin-left: auto;
}

.overflow-hidden {
  overflow: hidden;
}


// 字体
.font-small {
  font-size: 10px;
}

.font-size-12 {
  font-size: 12px;
}

.font-size-13 {
  font-size: 13px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

.font-size-20 {
  font-size: 20px;
}

.font-size-22 {
  font-size: 22px;
}

.font-bold {
  font-weight: bold;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;

  & /deep/ .el-input__inner {
    text-align: center;
  }
}

// 颜色
.color-main {
  color: $color-main
}

.color-blue {
  color: #409eff;
}

.color-success {
  color: #67C23A;
}

.color-warning {
  color: #E6A23C;
}

.color-grey {
  color: #aaa;
}

.color-white {
  color: #fff;
}

.color-danger {
  color: #F56C6C;
}

.color-info{
  color: #909399;
}

// 宽高
.height-full {
  height: 100%;
}

.width-full {
  width: 100%;
}

// 外边距
//左
.margin-left-10 {
  margin-left: 10px !important;
}

.margin-left-15 {
  margin-left: 15px !important;
}

.margin-left-20 {
  margin-left: 20px;
}

.margin-left-30 {
  margin-left: 20px;
}

.margin-left-auto {
  margin-left: auto !important;
}

//上
.margin-top-15 {
  margin-top: 15px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-top-40 {
  margin-top: 40px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-top-60 {
  margin-top: 60px;
}

.margin-top-80 {
  margin-top: 80px;
}

//右
.margin-right-20 {
  margin-right: 20px;

}

//下
.margin-bottom-5 {
  margin-bottom: 5px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px;
}

// 内边距
.padding-left-20 {
  padding-left: 20px;
}

.padding-top-20 {
  padding-top: 20px;
}


.padding-top-30 {
  padding-top: 30px;
}


.padding-top-40 {
  padding-top: 40px;
}


.padding-top-50 {
  padding-top: 50px;
}


.padding-right-20 {
  padding-right: 20px;

}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

// 常用样式
.cursor-pointer {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

// 模块标题
.title-part {
  font-size: 19px;
  font-weight: bold;
  color: #242d3c;
}

.tip-small {
  font-size: 14px;
  color: #9aa2af;
}

.dialog-container {
  height: 50vh;
  overflow-y: auto;
  //overflow-x: hidden;
}

// 内容区域
.page-container {
  padding: 20px;
}

// 模块区域
.part-row {
  padding: 20px;
}

// 去掉单行 form-item的下边距
.offset-fotm-item /deep/ .el-form-item {
  margin-bottom: 0;
}

.el-scrollbar__wrap {
  overflow-x: auto !important;
}

// form-item 数据类型
.form-item-data /deep/ {
  .el-form-item__label {
    color: #99a9bf;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

/deep/ .el-alert__title {
  vertical-align: middle;
}

